<template>
    <div>
        <nav>
            <ul>
                <li :class="isShow == 0 ? 'active' : ''" @click="isShow = 0">所有用户</li>
                <li :class="isShow == 1 ? 'active' : ''" @click="isShow = 1">正常用户</li>
                <li :class="isShow == 2 ? 'active' : ''" @click="isShow = 2">违规用户</li>
            </ul>
        </nav>
        <div class="tb">
            <template v-show="isShow == 0">
                <el-table :data="userAll.arr" border style="width: 100%">
                    <el-table-column prop="passname" label="用户名" width="200" />
                    <el-table-column prop="sex" label="用户性别" width="120" />
                    <el-table-column prop="age" label="用户年龄" width="120" />
                    <el-table-column prop="essayNum" label="用户发表文章数量" width="150" />
                    <el-table-column prop="likeNum" label="用户喜欢数量" width="120" />
                    <el-table-column prop="collectNum" label="用户收藏数量" width="120" />
                    <el-table-column prop="sT" label="用户状态" width="230" />
                </el-table>
            </template>
            <template v-show="isShow == 1">
                <el-table :data="userAllY" border style="width: 100%">
                    <el-table-column prop="passname" label="用户名" width="200" />
                    <el-table-column prop="sex" label="用户性别" width="120" />
                    <el-table-column prop="age" label="用户年龄" width="120" />
                    <el-table-column prop="essayNum" label="用户发表文章数量" width="150" />
                    <el-table-column prop="likeNum" label="用户喜欢数量" width="120" />
                    <el-table-column prop="collectNum" label="用户收藏数量" width="120" />
                    <el-table-column prop="sT" label="用户状态" width="230" />
                    <el-table-column fixed="right" label="操作" width="120">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click.prevent="setUserSApi(scope.$index, 0, 'y')"> 禁用 </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <template v-show="isShow == 2">
                <el-table :data="userAllN" border style="width: 100%">
                    <el-table-column prop="passname" label="用户名" width="200" />
                    <el-table-column prop="sex" label="用户性别" width="120" />
                    <el-table-column prop="age" label="用户年龄" width="120" />
                    <el-table-column prop="essayNum" label="用户发表文章数量" width="150" />
                    <el-table-column prop="likeNum" label="用户喜欢数量" width="120" />
                    <el-table-column prop="collectNum" label="用户收藏数量" width="120" />
                    <el-table-column prop="sT" label="用户状态" width="230" />
                    <el-table-column fixed="right" label="操作" width="120">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click.prevent="setUserSApi(scope.$index, 1, 'n')"> 恢复 </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import { getUserAll, setUserS } from "@/api/index";
import axios from "axios";
let isShow = ref(0);
let userAll = reactive({ arr: [] });

let getUserAllApi = () => {
    axios(getUserAll()).then(({ data }) => {
        userAll.arr = data.data;
        console.log(userAll.arr);
    });
};
getUserAllApi();
let userAllY = computed(() => {
    return userAll.arr.filter((i) => {
        return i.s == 1;
    });
});
let userAllN = computed(() => {
    return userAll.arr.filter((i) => {
        return i.s == 0;
    });
});

let setUserSApi = (index, s, t) => {
    console.log(index, s, t);
    let id;
    console.log(userAllY.value[index].id);
    if (t == "y") {
        id = userAllY.value[index].id;
    } else if (t == "n") {
        id = userAllN.value[index].id;
    }
    console.log(id);
    axios
        .post(setUserS(), {
            id,
            s,
        })
        .then(({ data }) => {
            if (data.s == 200) {
                ElMessage({
                    message: data.m,
                    type: "success",
                });
                setTimeout(() => {
                    location.reload(true);
                }, 500);
            } else {
                ElMessage.error(data.m);
            }
        });
};
</script>

<style lang="scss" scoped>
ul {
    display: flex;
    height: 30px;
    line-height: 30px;
    margin-bottom: 10px;
    font-size: 14px;
    li {
        width: 120px;
        text-align: center;
        margin-right: 10px;
        border-radius: 15px;
        box-shadow: 0 0 2px rgba($color: #000000, $alpha: 0.2);
    }
    .active {
        background-color: #8076a3;
        color: #fff;
    }
}
.tb {
    overflow: hidden;
}
template {
    display: block;
}
</style>
